<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>神游网视频页</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/jquery.validate.regex.js"></script>
    <script src="js/vue.min1.js"></script>
    <link rel="stylesheet" href="css_w/video.css">
    <link rel="stylesheet" href="css_w/public.css">
    <script>
        $(function () {

            var vm = new Vue({
                el:"#main",
                data:{
                    items1:[],
                    items2:[],
                    items3:[],
                    items4:[],
                    items5:[],
                    items6:[],
                },created: function () {
                    $.ajax({
                        url: "/getVideoItem1",
                        type: "post",
                        dataType: "json",
                        data:{
                            "videoSort":1,
                        },
                        success:function (data) {
                            // alert(data);
                            // $(".recommend_box").remove();
                            for(var i=0;i<data.length;i++){
                                vm.items1.push({video_id:data[i].videoId,upload_time:data[i].uploadTime.toString().substr(0,10),video_last:data[i].videoLast,video_title:data[i].videoTitle,video_hot:data[i].videoHot, main_id:data[i].mainId,discuss_id:data[i].discussId});
                            }
                        }
                    });
                    $.ajax({
                        url: "/getVideoItem1",
                        type: "post",
                        dataType: "json",
                        data:{
                            "videoSort":2,
                        },
                        success:function (data) {
                            // alert(data);
                            // $(".recommend_box").remove();
                            for(var i=0;i<data.length;i++){
                                vm.items2.push({video_id:data[i].videoId,upload_time:data[i].uploadTime.toString().substr(0,10),video_last:data[i].videoLast,video_title:data[i].videoTitle,video_hot:data[i].videoHot, main_id:data[i].mainId,discuss_id:data[i].discussId});
                            }
                        }
                    });
                    $.ajax({
                        url: "/getVideoItem1",
                        type: "post",
                        dataType: "json",
                        data:{
                            "videoSort":3,
                        },
                        success:function (data) {
                            // alert(data);
                            // $(".recommend_box").remove();
                            for(var i=0;i<data.length;i++){
                                vm.items3.push({video_id:data[i].videoId,upload_time:data[i].uploadTime.toString().substr(0,10),video_last:data[i].videoLast,video_title:data[i].videoTitle,video_hot:data[i].videoHot, main_id:data[i].mainId,discuss_id:data[i].discussId});
                            }
                        }
                    });
                    $.ajax({
                        url: "/getVideoItem1",
                        type: "post",
                        dataType: "json",
                        data:{
                            "videoSort":4,
                        },
                        success:function (data) {
                            // alert(data);
                            // $(".recommend_box").remove();
                            for(var i=0;i<data.length;i++){
                                vm.items4.push({video_id:data[i].videoId,upload_time:data[i].uploadTime.toString().substr(0,10),video_last:data[i].videoLast,video_title:data[i].videoTitle,video_hot:data[i].videoHot, main_id:data[i].mainId,discuss_id:data[i].discussId});
                            }
                        }
                    });
                    $.ajax({
                        url: "/getVideoItem1",
                        type: "post",
                        dataType: "json",
                        data:{
                            "videoSort":5,
                        },
                        success:function (data) {
                            // alert(data);
                            // $(".recommend_box").remove();
                            for(var i=0;i<data.length;i++){
                                vm.items5.push({video_id:data[i].videoId,upload_time:data[i].uploadTime.toString().substr(0,10),video_last:data[i].videoLast,video_title:data[i].videoTitle,video_hot:data[i].videoHot, main_id:data[i].mainId,discuss_id:data[i].discussId});
                            }
                        }
                    });
                    $.ajax({
                        url: "/getVideoItem1",
                        type: "post",
                        dataType: "json",
                        data:{
                            "videoSort":6,
                        },
                        success:function (data) {
                            // alert(data);
                            // $(".recommend_box").remove();
                            for(var i=0;i<data.length;i++){
                                vm.items6.push({video_id:data[i].videoId,upload_time:data[i].uploadTime.toString().substr(0,10),video_last:data[i].videoLast,video_title:data[i].videoTitle,video_hot:data[i].videoHot, main_id:data[i].mainId,discuss_id:data[i].discussId,video_sort:data[i].videoSort});
                            }
                        }
                    });
                },methods:{
                    // 推荐模块点击跳转播放页事件
                    chooseOpen1:function (index) {
                        sessionStorage.setItem("videoId1",this.items1[index].video_id);
                        window.location.href="videoOpen.html";
                    },
                    // 小视频点击跳转播放页事件
                    chooseOpen2:function (index) {
                        sessionStorage.setItem("videoId1",this.items2[index].video_id);
                        window.location.href="videoOpen.html";
                    },
                    // 旅行点击跳转播放页事件
                    chooseOpen3:function (index) {
                        sessionStorage.setItem("videoId1",this.items3[index].video_id);
                        window.location.href="videoOpen.html";
                    },
                    // 活动点击跳转播放页事件
                    chooseOpen4:function (index) {
                        sessionStorage.setItem("videoId1",this.items4[index].video_id);
                        window.location.href="videoOpen.html";
                    },
                    // 访谈点击跳转播放页事件
                    chooseOpen5:function (index) {
                        sessionStorage.setItem("videoId1",this.items5[index].video_id);
                        window.location.href="videoOpen.html";
                    },
                    // 航拍点击跳转播放页事件
                    chooseOpen6:function (index) {
                        sessionStorage.setItem("videoId1",this.items6[index].video_id);
                        window.location.href="videoOpen.html";
                    },
                    // 航拍点击跳转播放页事件
                    clickMore1:function (index) {
                    },
                }
            });
            // 点击更多跳转至分类页
            $("#smallVideo").click(function () {
                sessionStorage.setItem("videoSort2",2);
                window.location.href="videoSort.html";
            });
            $("#travel").click(function () {
                sessionStorage.setItem("videoSort3",3);
                window.location.href="videoSort.html";
            });
            $("#huoDong").click(function () {
                sessionStorage.setItem("videoSort4",4);
                window.location.href="videoSort.html";
            });
            $("#fanTan").click(function () {
                sessionStorage.setItem("videoSort5",5);
                window.location.href="videoSort.html";
            });
            $("#hangPai").click(function () {
                sessionStorage.setItem("videoSort6",6);
                window.location.href="videoSort.html";
            });
        });


    </script>

</head>
<body>
<!--头部导航栏-->
<div class="public_head">
    <ul>
        <li class="logo"><a href="http://www.youxiake.com" target="_blank" style="background-image: url(images_W/logo_01.png);"></a></li>
        <li><a href="sy-index.html">首页</a></li>
        <li><a href="community_my.html">社区</a></li>
        <li><a>目的地</a></li>
        <li><a href="YouJi-Z.html">攻略</a></li>
        <li><a href="video.html" style="color: orange;">视频</a></li>
        <li><a target="_blank">领队</a></li>
        <li><a href="photo.html">摄影</a></li>
        <li class="mugua_box">
            <a class="mugua_a" href="javascript:;">旅游</a>
            <div class="mugua_ul">
                <a target="_blank" class="mugua_li">周边游</a>
                <a target="_blank" class="mugua_li">国内游</a>
                <a target="_blank" class="mugua_li">出境游</a>
                <a target="_blank" class="mugua_li">当地玩乐</a>
                <a target="_blank" class="mugua_li">亲子游</a>
                <a target="_blank" class="mugua_li">户外游</a>
                <a target="_blank" class="mugua_li">定制游</a>
            </div>
        </li>
        <li><a href="http://www.youxiake.com/app/" target="_blank">APP</a></li>
        <li style="float: right;"><a href="http://www.youxiake.com/reg?refer=http://www.youxiake.com/film/" target="_blank">注册</a></li>
        <li style="float: right;"><a href="http://www.youxiake.com/login?refer=http://www.youxiake.com/film/" target="_blank">登录</a></li>
    </ul>
</div>
<!--轮播图-->
<div class="banner_container">
        <div id="banner">
            <div id="img_Box">
                <img src="images_W/lunbo01.jpg" style="display: block;">
                <img src="images_W/lunbo02.jpg">
                <img src="images_W/lunbo03.jpg">
                <img src="images_W/lunbo04.jpg">
                <img src="images_W/lunbo05.jpg">
            </div>
            <div id="img_Box-p">
                <p style="display: block;">纳米比亚-冒险家的乐园</p>
                <p>仙本那-游侠客2018年员工度假！</p>
                <p>科莫多岛-独属于勇者的浪漫与激情</p>
                <p>在尼泊尔“慢下来”- 镜头背后的故事！</p>
                <p>火车穿越中蒙俄-流连在贝加尔湖畔</p>
            </div>
            <div id="click">
                <ul>
                    <li class="tabli" style="background-color: white;"></li>
                    <li class="tabli"></li>
                    <li class="tabli"></li>
                    <li class="tabli"></li>
                    <li class="tabli"></li>
                </ul>
            </div>
            <div id="turn">
                <img src="images_W/left.png" id="leftTurn">
                <img src="images_W/right.png" id="rightTurn">
            </div>
        </div>
</div>
<div class="main" id="main">
<!--下方导航栏-->
    <div class="nav_container">
        <div class="nav_box">
            <div class="nav_ul">
                <a target="_blank" href="videoSort.html" class="nav_li">全部</a>
                <a target="_blank" href="videoSort.html" class="nav_li">小视频</a>
                <a target="_blank" href="videoSort.html" class="nav_li">旅行</a>
                <a target="_blank" href="videoSort.html" class="nav_li">活动</a>
                <a target="_blank" href="videoSort.html" class="nav_li">访谈</a>
                <a target="_blank" href="videoSort.html" class="nav_li">航拍</a>
                <a target="_blank" href="videoSort.html" class="nav_li">延时</a>
                <a target="_blank" href="upLoadVideo.html" class="nav_li">上传视频</a>
            </div>
            <div class="nav_search">
                <input type="text" class="search_input js-search_input" maxlength="20" placeholder="搜索视频">
                <div class="search_button js-search_button"></div>
            </div>
        </div>
        <div class="nav_search">
            <input type="text" class="search_input js-search_input" maxlength="20" placeholder="搜索视频">
            <div class="search_button js-search_button"></div>
        </div>
    </div>
<!--视频主体-->
<!--推荐-->
    <div class="recommend_container">
        <div class="recommend_title">推荐<span>/RECOMMENDATION</span></div>
        <div class="recommend_box" >
            <a target="_blank" class="recommend" v-for="(item,index) in items1" @click="chooseOpen1(index)">
                <img :src="item.main_id" class="recommend_pic">
                <div class="recommend_datetime">
                    <div class="datetime_date">{{item.upload_time}}</div>
                    <div class="datetime_time">{{item.video_last}}</div>
                </div>
                <div class="recommend_content">
                    <div class="content_title"><span>原创</span>{{item.video_title}}</div>
                    <div class="content_count">播放&nbsp;&nbsp;{{item.video_hot}}&nbsp;&nbsp;|&nbsp;&nbsp;评论&nbsp;&nbsp;{{item.discuss_id}}</div>
                </div>
            </a>
        </div>
    </div>
<!--小视频-->
    <div class="newFilm_container">
        <div class="newFilm_content">
            <div class="newFilm_box js-film">
                <div class="box_title">小视频<span>/SNAP VIDEO</span><a target="_blank" id="smallVideo">更多&gt;</a></div>
                <div class="shortVideo">
                    <a target="_blank" class="recommend" v-for="(item,index) in items2" @click="chooseOpen2(index)">
                        <img :src="item.main_id" class="recommend_pic">
                        <div class="recommend_datetime">
                            <div class="datetime_date">{{item.upload_time}}</div>
                            <div class="datetime_time">{{item.video_last}}</div>
                        </div>
                        <div class="recommend_content">
                            <div class="content_title"><span>原创</span>{{item.video_title}}</div>
                            <div class="content_count">播放&nbsp;&nbsp;{{item.video_hot}}&nbsp;&nbsp;|&nbsp;&nbsp;评论&nbsp;&nbsp;{{item.discuss_id}}</div>
                        </div>
                    </a>
                </div>
                <div class="newfilm__arrow--left"></div>
                <div class="newfilm__arrow--right"></div>
            </div>
        </div>
    </div>
<!--旅行-->
    <div class="newFilm_container">
        <div class="newFilm_content">
            <div class="newFilm_box js-film">
                <div class="box_title">旅行<span>/TRAVEL</span><a target="_blank" id="travel">更多&gt;</a></div>
                <div class="shortVideo">
                    <a target="_blank" class="recommend" v-for="(item,index) in items3" @click="chooseOpen3(index)">
                        <img :src="item.main_id" class="recommend_pic">
                        <div class="recommend_datetime">
                            <div class="datetime_date">{{item.upload_time}}</div>
                            <div class="datetime_time">{{item.video_last}}</div>
                        </div>
                        <div class="recommend_content">
                            <div class="content_title"><span>原创</span>{{item.video_title}}</div>
                            <div class="content_count">播放&nbsp;&nbsp;{{item.video_hot}}&nbsp;&nbsp;|&nbsp;&nbsp;评论&nbsp;&nbsp;{{item.discuss_id}}</div>
                        </div>
                    </a>
                </div>
                <div class="newfilm__arrow--left"></div>
                <div class="newfilm__arrow--right"></div>
            </div>
        </div>
    </div>
<!--活动-->
    <div class="newFilm_container">
        <div class="newFilm_content">
            <div class="newFilm_box js-film">
                <div class="box_title">活动<span>/ACTIVITY</span><a target="_blank" id="huoDong">更多&gt;</a></div>                <div class="shortVideo">
                    <a target="_blank" class="recommend" v-for="(item,index) in items4" @click="chooseOpen4(index)">
                        <img :src="item.main_id" class="recommend_pic">
                        <div class="recommend_datetime">
                            <div class="datetime_date">{{item.upload_time}}</div>
                            <div class="datetime_time">{{item.video_last}}</div>
                        </div>
                        <div class="recommend_content">
                            <div class="content_title"><span>原创</span>{{item.video_title}}</div>
                            <div class="content_count">播放&nbsp;&nbsp;{{item.video_hot}}&nbsp;&nbsp;|&nbsp;&nbsp;评论&nbsp;&nbsp;{{item.discuss_id}}</div>
                        </div>
                    </a>
                </div>
                <div class="newfilm__arrow--left"></div>
                <div class="newfilm__arrow--right"></div>
            </div>

        </div>

    </div>
<!--访谈-->
    <div class="newFilm_container">
        <div class="newFilm_content">
            <div class="newFilm_box js-film">
                <div class="box_title">访谈<span>/INTERVIEW</span><a target="_blank" id="fanTan">更多&gt;</a></div>
                <div class="shortVideo">
                    <a target="_blank" class="recommend" v-for="(item,index) in items5" @click="chooseOpen5(index)">
                        <img :src="item.main_id" class="recommend_pic">
                        <div class="recommend_datetime">
                            <div class="datetime_date">{{item.upload_time}}</div>
                            <div class="datetime_time">{{item.video_last}}</div>
                        </div>
                        <div class="recommend_content">
                            <div class="content_title"><span>原创</span>{{item.video_title}}</div>
                            <div class="content_count">播放&nbsp;&nbsp;{{item.video_hot}}&nbsp;&nbsp;|&nbsp;&nbsp;评论&nbsp;&nbsp;{{item.discuss_id}}</div>
                        </div>
                    </a>
                </div>
                <div class="newfilm__arrow--left"></div>
                <div class="newfilm__arrow--right"></div>
            </div>
        </div>
    </div>
<!--航拍-->
    <div class="newFilm_container">
        <div class="newFilm_content">
            <div class="newFilm_box js-film">
                <div class="box_title">航拍<span>/AERIAL</span><a target="_blank" id="hangPai">更多&gt;</a></div>
                <div class="shortVideo">
                    <a target="_blank" class="recommend" v-for="(item,index) in items6" @click="chooseOpen6(index)">
                        <img :src="item.main_id" class="recommend_pic">
                        <div class="recommend_datetime">
                            <div class="datetime_date">{{item.upload_time}}</div>
                            <div class="datetime_time">{{item.video_last}}</div>
                        </div>
                        <div class="recommend_content">
                            <div class="content_title"><span>原创</span>{{item.video_title}}</div>
                            <div class="content_count">播放&nbsp;&nbsp;{{item.video_hot}}&nbsp;&nbsp;|&nbsp;&nbsp;评论&nbsp;&nbsp;{{item.discuss_id}}</div>
                        </div>
                    </a>
                </div>
            </div>
                <div class="newfilm__arrow--left"></div>
                <div class="newfilm__arrow--right"></div>
        </div>
    </div>


</div>
<!--底部-->
<div class="b_floor">
    <div class="l_wrapper">
        <div class="m_unit_b2">
            <div class="footerInfo">
                <ul class="weima">
                    <li>
                        <img src="images_W/wechat01.jpg" width="77" height="77">
                        <p>神游网公众号</p>
                    </li>
                    <li>
                        <img src="images_W/wechat02.jpeg" width="78" height="79">
                        <p>APP下单更优惠</p>
                    </li>
                </ul>
                <p>
                    <a data-trace="页面底部|页面底部_点击|页面底部_关于游侠客" rel="nofollow" href="javascript:void (0)" target="_blank">关于游侠客</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_游侠客的故事" rel="nofollow" href="javascript:void (0)" target="_blank">游侠客的故事</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_联系游侠客" rel="nofollow" href="javascript:void (0)" target="_blank">联系游侠客</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_游侠客招聘" rel="nofollow" href="javascript:void (0)" target="_blank">游侠客招聘</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_意见反馈" rel="nofollow" href="javascript:void (0)" target="_blank">意见反馈</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_使用协议" rel="nofollow" href="javascript:void (0)" target="_blank">使用协议</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_隐私政策" rel="nofollow" href="javascript:void (0)" target="_blank">隐私政策</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_交换链接" rel="nofollow" href="javascript:void (0)" target="_blank">交换链接</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_帮助中心" rel="nofollow" href="javascript:void (0)" target="_blank">帮助中心</a>
                    <a data-trace="页面底部|页面底部_点击|页面底部_网站地图" rel="nofollow" href="javascript:void (0)" target="_blank">网站地图</a>
                </p>
                <p>
                    <span>浙ICP备 09011712 号-1</span>
                    <span>浙公网安备 33010602002105号</span>
                    <span><a href="javascript:void (0)" rel="nofollow" target="_blank">营业执照</a></span>
                    <span>浙江游侠客国际旅行社有限公司</span>
                    <span>杭州途游电子商务有限公司</span>
                    <span>许可证编号：L-ZJ-CJ00161</span>
                </p>
                <p>©  2019 youxiake.com 版权所有法律顾问：浙江四海方圆律师事务所 傅林放 杭州市旅游投诉电话：0571-96123 投诉及紧急事件联系电话：400-670-6300转5</p>
                <p>旅游预订电话(免长途费)：400-670-6300，公司总部地址：浙江省杭州市西湖区教工路198号浙商大创业园D幢3楼，投诉建议邮箱：jianyi@youxiake.com</p>
            </div>
            <div class="friendLines">
                <div class="footerimages_W clearfix foot-ext">
                    <a class="footer-ext-s2" href="javascript:;" onclick="window.open('http://net.china.com.cn/index.htm')" title="不良信息举报中心"></a>
                    <a class="footer-ext-s3" href="javascript:;" onclick="window.open('http://union.rising.com.cn/InfoManage/attestation.aspx?p0=W86D47XQRcVtTOYJMVjfRn-NIHQ6TlFupjQAkt-jEyg=')" title="瑞信安全认证"></a>
                    <a class="footer-ext-s4" href="javascript:;" onclick="window.open('http://www.12312.gov.cn')" title="12321垃圾信息举报中心"></a>
                    <a href="javascript:;" onclick="window.open('http://fun.alipay.com/down/index.htm?cid=shwaibusj&amp;pid=Q_ANDROID_SHWAIBUSJ')"><img width="116" height="47" src="http://static.youxiake.com/new/Public/images/alipay201305.png" alt="支付宝"></a>
                    <a class="footer-ext-s5" href="javascript:;" onclick="window.open('http://www.cyberpolice.cn/')" title="网络110报警服务"></a>
                    <a class="footer-ext-s6" href="javascript:;" onclick="window.open('http://122.224.75.236/wzba/login.do?method=hdurl&amp;doamin=http://www.youxiake.com&amp;id=330106000183104&amp;SHID=1223.0AFF_NAME=com.rouger. gs.main.UserInfoAff&amp;AFF_ACTION=qyhzdetail&amp;PAGE_URL=ShowDetail')" title="网上标识信息"></a>
                    <a class="footer-ext-s7" href="javascript:;" onclick="window.open('http://bbs.ifeng.com/special/bbs100/lty.shtml?bbsid=1912')" title="全球中文论坛100强"></a>
                    <a href="http://www.anquan.org/authenticate/cert/?site=www.youxiake.com&amp;sn=2013121115015380199" target="_blank" style="background:none"><img src="http://static.youxiake.com/new/Public/images/kx_124x47.png" alt="安全联盟" height="47"></a>
                </div>
            </div>

        </div>
    </div>
</div>
</body>
<script>

    // 轮播图部分
    //1.声明一个变量，记录当前的页码是多少
    var page = 0;
    //执行定时器，让图片根据页面进行改变
    //获取所有图片
    var allTab = document.getElementById('img_Box').getElementsByTagName('img');
    var allP = document.getElementById('img_Box-p').getElementsByTagName('p');
    var allLi = document.getElementsByClassName('tabli');
    var timer = setInterval(function(){
        page++;
        if(page>=allTab.length){
            page = 0;
        }
        change(page);
    },2000)
    //出现报错，page无限向上进行累加
    var oBanner = document.getElementById('banner');
    var oTurn = document.getElementById("turn");

    oBanner.onmouseover = function(){
        clearInterval(timer);
        oTurn.style.display = "block";
    }
    oBanner.onmouseleave = function(){
        oTurn.style.display = "none";
        timer = setInterval(function(){
            page++;
            if(page>=allTab.length){
                page = 0;
            }
            change(page);
        },2000);
    }
    //反复移入移出之后，定时会出现重复的情况。

    //实现点击小圆点切换
    for(var i=0;i<allLi.length;i++){
        allLi[i].setAttribute('flag',i);
        allLi[i].onclick=function(){
            var flag = this.getAttribute('flag');
            change(page);
            page=flag;
        }
    }
    // 实现点击图标进行图片切换
    var oRight = document.getElementById("rightTurn");
    oRight.onclick = function(){
        page++;
        if(page>=allTab.length){
            page = 0;
        }
        change(page);
    }

    var oLeft = document.getElementById("leftTurn");
    oLeft.onclick = function(){
        page--;
        if(page<0){
            //恢复原来长度
            page = allTab.length-1;
        }
        //函数调用
        change(page);
    }
    //函数封装
    function change(page){
        for (var i = 0; i <allTab.length; i++) {
            allTab[i].style.display='none';
            allLi[i].style.backgroundColor="#7d7d7d";
            allP[i].style.display='none';
        }
        allTab[page].style.display='block';
        allLi[page].style.backgroundColor="white";
        allP[page].style.display='block';
    }

</script>
</html>